<template>
  <div>
    <el-card shadow style="margin:20px 0px">
      <CategorySelect :show="!isShowTable"></CategorySelect>
    </el-card>
    <el-card shadow>
      <div v-show="isShowTable">
        <el-button type="primary" icon="el-icon-plus" :disabled="!levelThreeId" @click="addAttr">添加属性</el-button>
        <el-table :data="attrInfoList" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80px" align="center">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150" align="center">
          </el-table-column>
          <el-table-column prop="prop" label="属性值列表" width="width" align="center">
            <template slot-scope="{row}">
              <el-tag type="success" v-for="item in row.attrValueList" :key="item.id" style="margin:5px">{{item.valueName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="warning" size="mini" icon="el-icon-edit" @click="editAttr(row)"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteAttr(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="!isShowTable">
        <el-form :inline="true" label-width="80px" v-model="attrInfo">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addAttrValue" :disabled="!attrInfo.attrName">添加属性值</el-button>
        <el-button @click="isShowTable=true">取消</el-button>

        <el-table borde style="width: 100%;margin:20px 0" :data="attrInfo.attrValueList">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>

          <el-table-column porp="" label="属性值名称" width="width">
            <template slot-scope="{row,$index}">
              <el-input v-model="row.valueName" :ref="$index" placeholder="请输入属性值名称" size="mini" v-if="row.flag" @blur="toLook(row)" @keyup.native.enter="toLook(row)"></el-input>
              <span v-else @click="toEdit(row,$index)" style="display:block">{{row.valueName}}</span>
            </template>
          </el-table-column>

          <el-table-column porp="" label="操作" width="width">
            <template slot-scope="{row,$index}">
              <el-popconfirm :title="`确认删除${row.valueName}`" @onConfirm="deleteAttrValue($index)">
                <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="addOrUpdateAttr" :disabled="attrInfo.attrValueList.length<1">保存</el-button>
        <el-button @click="isShowTable=true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Attr",
  data() {
    return {
      isShowTable: true,
      attrInfo: {
        attrName: "",
        attrValueList: [],
        categoryId: 0,
        categorylevell: 3,
      },
    };
  },
  computed: {
    ...mapState("attr", {
      attrInfoList: (state) => state.attrInfoList,
      levelOneId: (state) => state.levelOneId,
      levelTwoId: (state) => state.levelTwoId,
      levelThreeId: (state) => state.levelThreeId,
    }),
  },
  methods: {
    //获取属性列表
    async getAttrInfo() {
      let levelOneId = this.levelOneId;
      let levelTwoId = this.levelTwoId;
      let levelThreeId = this.levelThreeId;
      await this.$store.dispatch("attr/getAttrInfoList", {
        levelOneId,
        levelTwoId,
        levelThreeId,
      });
    },
    //添加属性
    addAttr() {
      this.isShowTable = false;
      this.$nextTick(() => {
        this.attrInfo = {
          attrName: "",
          attrValueList: [],
          categoryId: this.levelThreeId,
          categorylevell: 3,
        };
      });
    },
    //添加属性值
    addAttrValue() {
      this.attrInfo.attrValueList.push({
        attrId: undefined,
        valueName: "",
        flag: true,
      });
      this.$nextTick(() => {
        this.$refs[this.attrInfo.attrValueList.length - 1].focus();
      });
    },
    //修改属性
    editAttr(row) {
      this.isShowTable = false;
      this.attrInfo = cloneDeep(row);
      this.attrInfo.attrValueList.forEach((item) => {
        this.$set(item, "flag", false);
      });
    },
    //删除属性值
    deleteAttrValue(index) {
      this.attrInfo.attrValueList.splice(index, 1);
    },
    //删除属性
    deleteAttr(row) {
      this.$confirm(`确认删除${row.attrName}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.dispatch("attr/deleteAttr", row.id);
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getAttrInfo();
      });
    },
    toLook(row) {
      if (row.valueName.trim() == "") {
        return;
      }
      let isRepat = this.attrInfo.attrValueList.some((item) => {
        if (row !== item) {
          return row.valueName == item.valueName;
        }
      });
      if (isRepat) return;
      row.flag = false;
    },
    toEdit(row, index) {
      row.flag = true;
      this.$nextTick(() => {
        this.$refs[index].focus();
      });
    },
    //保存或修改
    async addOrUpdateAttr() {
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(
        (item) => {
          if (item.valueName != "") {
            delete item.flag;
            return true;
          }
        }
      );
      try {
        const result = await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
        this.isShowTable = true;
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.getAttrInfo();
      } catch (error) {}
    },
  },
  watch: {
    //监听三级下拉菜单ID，一旦发生变化就获取属性列表
    levelThreeId: {
      handler() {
        this.getAttrInfo();
      },
    },
  },
};
</script>